<template>
  <div class="list">
    <el-table v-loading="loading" border :data="tableData">
      <el-table-column
        align="center"
        prop="pointName"
        label="小区名称"
      />
      <el-table-column
        align="center"
        prop="building"
        label="小区楼栋信息"
      />
      <el-table-column
        align="center"
        prop="room"
        label="小区房间信息"
      />
      <el-table-column
        align="center"
        prop="userName"
        label="业主"
      />
      <el-table-column
        align="center"
        prop="idcardFrontUrl"
        label="身份证正面照"
      >
        <template slot-scope="scope">
          <el-image :src="scope.row.idcardFrontUrl" fit="cover" class="idcard" />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="idcardBackUrl"
        label="身份证反面照"
      >
        <template slot-scope="scope">
          <el-image :src="scope.row.idcardBackUrl" fit="cover" class="idcard" />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="status"
        label="状态"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === '1'" type="info">审核中</el-tag>
          <el-tag v-if="scope.row.status === '2'" type="success">通过</el-tag>
          <el-tag v-if="scope.row.status === '3'" type="danger">拒绝</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="action"
        label="操作"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.status === '1'">
            <el-button type="primary" size="small" @click="audit(scope.row,'2')">通过</el-button>
            <el-button type="danger" size="small" @click="audit(scope.row,'3')">拒绝</el-button>
          </div>

        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next, total,sizes,jumper"
        :current-page="pageNo"
        :total="total"
        :disabled="loading"
        @current-change="searchByPage"
        @size-change="sizeChange"
      />
    </div>
  </div>
</template>

<script>
import { houseList, houseAudit } from '@/api'
export default {
  name: 'HouseList',
  data() {
    return {
      loading: false,
      total: 0,
      pageNo: 1,
      pageSize: 10,
      tableData: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    searchByPage(pageNo) {
      this.pageNo = pageNo
      this.getList()
    },
    sizeChange(pageSize) {
      this.pageSize = pageSize
      this.searchByPage(1)
    },
    async getList() {
      if (this.loading) return
      this.loading = true
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      await houseList(params).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.list
          this.total = res.data.pagination.total
          return
        }
        this.tableData = []
        this.total = 0
      })
      this.loading = false
    },
    async audit(row, status) {
      const that = this
      this.$confirm('确定审核该房屋？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const params = {
            id: row.id,
            status
          }
          await houseAudit(params).then(res => {
            if (res.code === '0') {
              that.getList()
              that.$message.success('审核成功')
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
    }
  }
}
</script>
